<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点菜</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        background: #181a20;
        color: #f5f6fa;
        margin: 0;
        padding: 0;
      }
      .dish-page {
        display: flex;
        flex-direction: row;
        gap: 1.2rem;
        min-height: 80vh;
      }
      .side-nav {
        width: 80px;
        background: #20232a;
        border-radius: 1.2rem;
        padding: 1.2rem 0.5rem 1.2rem 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 2px 12px #00f2ea22;
        margin-right: 1rem;
        height: 100%;
        min-height: 80vh;
      }
      .nav-item {
        padding: 0.7rem 0.2rem;
        width: 100%;
        text-align: center;
        color: #b3e0f7;
        cursor: pointer;
        border-radius: 0.8rem;
        margin: 0.1rem 0;
        font-size: 1.05rem;
        font-weight: 500;
        transition: background 0.18s, color 0.18s;
      }
      .nav-item.active {
        background: linear-gradient(90deg, #00f2ea 0%, #fe2c55 100%);
        color: #fff;
        font-weight: bold;
        box-shadow: 0 2px 8px #00f2ea33;
      }
      .food-list-area {
        flex: 1;
        min-width: 0;
      }
      .food-list {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        margin-top: 1.2rem;
      }
      .food-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: linear-gradient(120deg, #23272f 60%, #23233b 100%);
        border-radius: 1.2rem;
        box-shadow: 0 4px 18px 0 #00f2ea22;
        padding: 0.7rem 1.1rem 0.7rem 0.7rem;
        position: relative;
        transition: box-shadow 0.18s, transform 0.18s;
        overflow: hidden;
      }
      .food-card:hover {
        box-shadow: 0 10px 32px 0 #00f2ea44;
        transform: translateY(-2px) scale(1.025);
      }
      .food-img {
        width: 70px;
        height: 70px;
        border-radius: 1rem;
        object-fit: cover;
        margin-right: 1.1rem;
        box-shadow: 0 2px 8px #00f2ea33;
        flex-shrink: 0;
        border: 2px solid #00f2ea33;
      }
      .food-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .food-name {
        font-size: 1.18rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 0.18rem;
        text-align: left;
        letter-spacing: 0.5px;
      }
      .food-desc {
        color: #b3e0f7;
        font-size: 0.97rem;
        margin-bottom: 0.5rem;
        text-align: left;
        min-height: 1.8em;
      }
      .food-card-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }
      .food-price {
        color: #00f2ea;
        font-weight: bold;
        font-size: 1.13rem;
        letter-spacing: 0.5px;
      }
      .order-btn {
        background: linear-gradient(90deg, #fe2c55 0%, #00f2ea 100%);
        color: #fff;
        font-weight: bold;
        padding: 0.38rem 1.1rem;
        border-radius: 1.2rem;
        box-shadow: 0 2px 8px #fe2c5533;
        font-size: 1rem;
        transition: background 0.18s;
        border: none;
        outline: none;
        cursor: pointer;
      }
      .order-btn:hover {
        background: linear-gradient(90deg, #00f2ea 0%, #fe2c55 100%);
      }
      .basket-fab {
        position: fixed;
        right: 2.2rem;
        bottom: 2.2rem;
        z-index: 100;
        background: linear-gradient(90deg, #fe2c55 0%, #00f2ea 100%);
        color: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 24px #00f2ea55;
        font-size: 2rem;
        border: none;
        cursor: pointer;
      }
      .basket-fab .basket-count {
        position: absolute;
        top: 8px;
        right: 8px;
        background: #fe2c55;
        color: #fff;
        border-radius: 50%;
        width: 1.3em;
        height: 1.3em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: bold;
        border: 2px solid #fff;
        box-shadow: 0 1px 4px #fe2c5533;
      }
    </style>
  </head>
  <body class="min-h-screen">
    <div class="max-w-md mx-auto py-6 px-2">
      <div class="dish-page">
        <div class="side-nav" id="side-nav">
          <div class="nav-item active" data-type="hot">热菜</div>
          <div class="nav-item" data-type="cold">凉菜</div>
          <div class="nav-item" data-type="vegetarian">素菜</div>
          <div class="nav-item" data-type="meat">荤菜</div>
          <div class="nav-item" data-type="soup">汤类</div>
          <div class="nav-item" data-type="staple">主食</div>
        </div>
        <div class="food-list-area">
          <div class="food-list" id="food-list">
            <div class="food-card" data-id="1">
              <img
                class="food-img"
                src="https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290814_1280.jpg"
                alt="红烧肉"
              />
              <div class="food-info">
                <div class="food-name">红烧肉</div>
                <div class="food-desc">肥而不腻，入口即化</div>
                <div class="food-card-bottom">
                  <span class="food-price">￥28</span>
                  <button
                    class="order-btn"
                    onclick="addToBasket(1, '红烧肉', 28)"
                  >
                    点菜
                  </button>
                </div>
              </div>
            </div>
            <div class="food-card" data-id="2">
              <img
                class="food-img"
                src="https://cdn.pixabay.com/photo/2016/03/05/19/02/salad-1238248_1280.jpg"
                alt="清炒时蔬"
              />
              <div class="food-info">
                <div class="food-name">清炒时蔬</div>
                <div class="food-desc">新鲜健康，清爽可口</div>
                <div class="food-card-bottom">
                  <span class="food-price">￥16</span>
                  <button
                    class="order-btn"
                    onclick="addToBasket(2, '清炒时蔬', 16)"
                  >
                    点菜
                  </button>
                </div>
              </div>
            </div>
            <div class="food-card" data-id="3">
              <img
                class="food-img"
                src="https://cdn.pixabay.com/photo/2015/04/08/13/13/food-712665_1280.jpg"
                alt="宫保鸡丁"
              />
              <div class="food-info">
                <div class="food-name">宫保鸡丁</div>
                <div class="food-desc">经典川菜，微辣爽口，花生香脆</div>
                <div class="food-card-bottom">
                  <span class="food-price">￥24</span>
                  <button
                    class="order-btn"
                    onclick="addToBasket(3, '宫保鸡丁', 24)"
                  >
                    点菜
                  </button>
                </div>
              </div>
            </div>
            <div class="food-card" data-id="4">
              <img
                class="food-img"
                src="https://cdn.pixabay.com/photo/2016/03/05/19/02/vegetables-1238250_1280.jpg"
                alt="鱼香茄子"
              />
              <div class="food-info">
                <div class="food-name">鱼香茄子</div>
                <div class="food-desc">酸甜适口，茄子软糯入味</div>
                <div class="food-card-bottom">
                  <span class="food-price">￥20</span>
                  <button
                    class="order-btn"
                    onclick="addToBasket(4, '鱼香茄子', 20)"
                  >
                    点菜
                  </button>
                </div>
              </div>
            </div>
            <div class="food-card" data-id="5">
              <img
                class="food-img"
                src="https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290812_1280.jpg"
                alt="糖醋里脊"
              />
              <div class="food-info">
                <div class="food-name">糖醋里脊</div>
                <div class="food-desc">外酥里嫩，酸甜开胃，老少皆宜</div>
                <div class="food-card-bottom">
                  <span class="food-price">￥26</span>
                  <button
                    class="order-btn"
                    onclick="addToBasket(5, '糖醋里脊', 26)"
                  >
                    点菜
                  </button>
                </div>
              </div>
            </div>
            <div class="food-card" data-id="6">
              <img
                class="food-img"
                src="https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290815_1280.jpg"
                alt="番茄炒蛋"
              />
              <div class="food-info">
                <div class="food-name">番茄炒蛋</div>
                <div class="food-desc">家常必备，酸甜可口，营养丰富</div>
                <div class="food-card-bottom">
                  <span class="food-price">￥14</span>
                  <button
                    class="order-btn"
                    onclick="addToBasket(6, '番茄炒蛋', 14)"
                  >
                    点菜
                  </button>
                </div>
              </div>
            </div>
            <div class="food-card" data-id="7">
              <img
                class="food-img"
                src="https://cdn.pixabay.com/photo/2016/03/05/19/02/vegetables-1238251_1280.jpg"
                alt="蒜蓉西兰花"
              />
              <div class="food-info">
                <div class="food-name">蒜蓉西兰花</div>
                <div class="food-desc">清新爽口，蒜香浓郁，健康低脂</div>
                <div class="food-card-bottom">
                  <span class="food-price">￥18</span>
                  <button
                    class="order-btn"
                    onclick="addToBasket(7, '蒜蓉西兰花', 18)"
                  >
                    点菜
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button class="basket-fab" onclick="goToBasket()">
      <i class="fa fa-shopping-basket"></i>
      <span class="basket-count" id="basket-count">0</span>
    </button>
    <script>
      // 分类与菜品数据
      const foodData = {
        hot: [
          {id: 1, name: '红烧肉', desc: '肥而不腻，入口即化', price: 28, img: 'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290814_1280.jpg'},
          {id: 3, name: '宫保鸡丁', desc: '经典川菜，微辣爽口，花生香脆', price: 24, img: 'https://cdn.pixabay.com/photo/2015/04/08/13/13/food-712665_1280.jpg'}
        ],
        cold: [
          {id: 2, name: '清炒时蔬', desc: '新鲜健康，清爽可口', price: 16, img: 'https://cdn.pixabay.com/photo/2016/03/05/19/02/salad-1238248_1280.jpg'}
        ],
        vegetarian: [
          {id: 4, name: '鱼香茄子', desc: '酸甜适口，茄子软糯入味', price: 20, img: 'https://cdn.pixabay.com/photo/2016/03/05/19/02/vegetables-1238250_1280.jpg'},
          {id: 7, name: '蒜蓉西兰花', desc: '清新爽口，蒜香浓郁，健康低脂', price: 18, img: 'https://cdn.pixabay.com/photo/2016/03/05/19/02/vegetables-1238251_1280.jpg'}
        ],
        meat: [
          {id: 5, name: '糖醋里脊', desc: '外酥里嫩，酸甜开胃，老少皆宜', price: 26, img: 'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290812_1280.jpg'}
        ],
        soup: [
          {id: 8, name: '紫菜蛋花汤', desc: '鲜美清淡，营养丰富', price: 12, img: 'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290815_1280.jpg'}
        ],
        staple: [
          {id: 6, name: '番茄炒蛋', desc: '家常必备，酸甜可口，营养丰富', price: 14, img: 'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290815_1280.jpg'}
        ]
      };
      function renderFoodList(type) {
        const list = foodData[type] || [];
        document.getElementById('food-list').innerHTML = list.map(item => `
          <div class="food-card" data-id="${item.id}">
            <img class="food-img" src="${item.img}" alt="${item.name}" />
            <div class="food-info">
              <div class="food-name" style="cursor:pointer; color:#00f2ea;" onclick="goToDetail(${item.id})">${item.name}</div>
              <div class="food-desc">${item.desc}</div>
              <div class="food-card-bottom">
                <span class="food-price">￥${item.price}</span>
                <button class="order-btn" onclick="addToBasket(${item.id}, '${item.name}', ${item.price})">点菜</button>
              </div>
            </div>
          </div>
        `).join('');
      }
      // 假数据详情
      const foodDetailData = {
        1: {id:1, name:'红烧肉', img:'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290814_1280.jpg', remark:'肥而不腻，入口即化', material:'五花肉、酱油、糖、料酒、葱姜蒜', method:'1. 五花肉切块焯水；2. 炒糖色，加入五花肉翻炒；3. 加调料炖煮至软烂收汁。'},
        2: {id:2, name:'清炒时蔬', img:'https://cdn.pixabay.com/photo/2016/03/05/19/02/salad-1238248_1280.jpg', remark:'新鲜健康，清爽可口', material:'时令蔬菜、蒜、盐、油', method:'1. 蔬菜洗净切段；2. 热锅凉油爆香蒜末；3. 下蔬菜大火快炒，加盐出锅。'},
        3: {id:3, name:'宫保鸡丁', img:'https://cdn.pixabay.com/photo/2015/04/08/13/13/food-712665_1280.jpg', remark:'经典川菜，微辣爽口，花生香脆', material:'鸡胸肉、花生、干辣椒、花椒、葱姜蒜', method:'1. 鸡丁腌制；2. 炒香花生备用；3. 炒鸡丁加配料，最后加花生翻炒均匀。'},
        4: {id:4, name:'鱼香茄子', img:'https://cdn.pixabay.com/photo/2016/03/05/19/02/vegetables-1238250_1280.jpg', remark:'酸甜适口，茄子软糯入味', material:'茄子、肉末、豆瓣酱、糖、醋、蒜', method:'1. 茄子切条炸软；2. 炒肉末加调料；3. 下茄子翻炒收汁。'},
        5: {id:5, name:'糖醋里脊', img:'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290812_1280.jpg', remark:'外酥里嫩，酸甜开胃，老少皆宜', material:'里脊肉、淀粉、糖、醋、番茄酱', method:'1. 里脊切条挂糊炸至金黄；2. 炒糖醋汁，倒入里脊翻匀。'},
        6: {id:6, name:'番茄炒蛋', img:'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290815_1280.jpg', remark:'家常必备，酸甜可口，营养丰富', material:'番茄、鸡蛋、盐、糖', method:'1. 鸡蛋炒熟盛出；2. 番茄炒软加蛋回锅，调味即可。'},
        7: {id:7, name:'蒜蓉西兰花', img:'https://cdn.pixabay.com/photo/2016/03/05/19/02/vegetables-1238251_1280.jpg', remark:'清新爽口，蒜香浓郁，健康低脂', material:'西兰花、大蒜、盐、油', method:'1. 西兰花焯水；2. 爆香蒜末，下西兰花快炒，加盐出锅。'},
        8: {id:8, name:'紫菜蛋花汤', img:'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290815_1280.jpg', remark:'鲜美清淡，营养丰富', material:'紫菜、鸡蛋、葱花、盐、香油', method:'1. 水开下紫菜，打入蛋液搅匀；2. 加盐、香油、葱花即可。'}
      };
      function goToDetail(id) {
        localStorage.setItem('detailData', JSON.stringify(foodDetailData[id]));
        window.location.href = 'detail.html';
      }
      // 分类切换
      document.querySelectorAll('.nav-item').forEach(item => {
        item.onclick = function() {
          document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
          this.classList.add('active');
          renderFoodList(this.dataset.type);
        }
      });
      // 初始化默认分类
      renderFoodList('hot');
      // 简单原型：点菜加入localStorage篮子
      function addToBasket(id, name, price) {
        let basket = JSON.parse(localStorage.getItem('basket') || '{}');
        if (!basket[id]) {
          basket[id] = { id, name, price, count: 1 };
        } else {
          basket[id].count += 1;
        }
        localStorage.setItem('basket', JSON.stringify(basket));
        updateBasketCount();
      }
      function updateBasketCount() {
        let basket = JSON.parse(localStorage.getItem('basket') || '{}');
        let total = Object.values(basket).reduce((sum, item) => sum + item.count, 0);
        document.getElementById('basket-count').textContent = total;
      }
      function goToBasket() {
        window.location.href = 'today_order.html';
      }
      updateBasketCount();
    </script>
  </body>
</html>
